<template>
  <Form
    class="custom-ivu-form"
    ref="formRef"
    :label-width="120"
    :model="formData"
    :rules="rules"
    @submit.native.prevent="handleFormSubmit"
  >
    <FormItem label="主题名称" prop="themeName">
      <Input
        v-model="formData.themeName"
        :disabled="disabledList.themeName"
        placeholder="请输入主题名称"
        size="large"
        clearable
        :maxlength="100"
      ></Input>
    </FormItem>

    <FormItem label="主题概述" prop="summary">
      <Input
        v-model="formData.summary"
        placeholder="请输入主题概述"
        size="large"
        clearable
        :maxlength="1000"
        style="height: 120px"
        type="textarea"
      ></Input>
    </FormItem>

    <FormItem label="监测周期" prop="startTime">
      <DatePicker
        type="datetimerange"
        :disabled="disabledList.time"
        :value="datePickerDefaultVal"
        format="yyyy-MM-dd HH:mm"
        placeholder="请选择日期"
        style="width: 100%"
        @on-change="handleTimeRange"
        @on-ok="handleTimeRangeOk"
      ></DatePicker>
    </FormItem>

    <FormItem label="内容地域">
      <Select v-model="formData.region" clearable>
        <Option v-for="(nt, i) of regions" :key="i" :value="nt.key">{{ nt.value }}</Option>
      </Select>
    </FormItem>

    <FormItem label="命中位置" class="form-item--radio">
      <RadioGroup v-model="formData.hitLocation">
        <Radio v-for="(it, i) of hitLocations" :class="i && 'ml60'" :key="i" :label="it.key">
          <span>{{ it.value }}</span>
        </Radio>
      </RadioGroup>
    </FormItem>

    <FormItem prop="includes">
      <template #label>
        关键词组1
        <Tooltip :content="keywordRuleStr" theme="light" max-width="400">
          <Icon class="bold f16 pointer" type="ios-help-circle-outline" style="vertical-align: -2px" />
        </Tooltip>
      </template>

      <div v-for="(ic, i) of formData.includes" :key="i" class="relative kw-group" :class="i > 0 && 'mt14'">
        <div v-if="i > 0" class="kw-group--label f14">关键词组{{ i + 1 }}</div>

        <Input v-model="ic[0]" placeholder="请输入" size="large" clearable></Input>
        <Input v-model="ic[1]" placeholder="请输入" size="large" clearable class="mt10"></Input>

        <div class="kw-group--oper">
          <span class="kgo--text f14">且</span>
          <div class="f24 kgo--btn height-full ml14">
            <Icon
              class="pointer"
              type="ios-add-circle-outline"
              :class="formData.includes.length > 4 && 'icon-disabled'"
              @click="handleIncludesAdd(i)"
            />
            <Icon
              class="pointer"
              :class="formData.includes.length < 2 && 'icon-disabled'"
              type="ios-remove-circle-outline"
              @click="handleIncludesRemove(i)"
            />
          </div>
        </div>
      </div>
    </FormItem>

    <FormItem label="排除关键词" prop="exclude">
      <Input v-model="formData.exclude" placeholder="请输入" size="large" clearable></Input>
    </FormItem>

    <Button class="d-none" type="primary" html-type="submit">查询</Button>
  </Form>
</template>

<script>
import { getThemeHit_locations, getThemeRegions } from '@/api/manageEnd/theme/themeList.js'

import { createRules } from './service'
export default {
  name: 'ThemeForm',

  props: {
    formData: {
      type: Object,
      default() {
        return {}
      },
    },

    disabledList: {
      type: Object,
      default() {
        return {}
      },
    },
  },

  data() {
    return {
      rules: createRules(),
      regions: [],
      hitLocations: [],

      keywordRuleStr: `关键词填写规则如下：
        ① 命中关键词一组有2行，2行之间的关系为且（与）的关系。表示这条信息同时命中这2行里的关键词才算命中监测。
        ② 可以添加多组关键词。点击多组关键词之间的关系为或的关系。表示一条信息命中多组关键词中的任意一组就算命中监测。
        ③ 支持添加和删除关键词组。点击可在当前关键词组下面添加一组新的关键词；点击可删除本组关键词。
        ④ 排除关键词：只有一行，多个关键词之间的关系为或的关系。表示即使命中了上述监测关键词，但若排除关键词中出现任意一个排除词的信息即为排除信息。
      `,
    }
  },

  computed: {
    datePickerDefaultVal() {
      return [this.formData.startTime, this.formData.endTime]
    },
  },

  methods: {
    handleTimeRange(date) {
      this.formData.startTime = date[0] + ':00'
      const date2 = date[1]
      /* 默认结束时间应该为 23:59:59 */
      if (date2.includes('00:00')) {
        this.formData.endTime = date2.replace('00:00', '23:59')  + ':59'
      } else {
        this.formData.endTime = date[1] + ':00'
      }
    },

    handleTimeRangeOk(date) {
      // console.log(date)
    },

    handleIncludesAdd(i) {
      if (this.formData.includes.length > 4) return
      this.formData.includes.splice(i + 1, 0, ['', ''])
    },
    handleIncludesRemove(i) {
      if (this.formData.includes.length < 2) return
      this.formData.includes.splice(i, 1)
    },

    handleFormSubmit() {
      // console.log('handleFormSubmit')
      this.$refs.formRef.validate().then((valid) => {
        if (!valid) return

        const data = { ...this.formData }
        this.$emit('on-theme-submit', data)
      })
    },

    async getThemeHit_locations() {
      const res = await getThemeHit_locations()
      this.hitLocations = res.data.data || []
      this.formData.hitLocation = this.hitLocations[0].key
    },

    async getThemeRegions() {
      const res = await getThemeRegions()
      this.regions = res.data.data || []
      // this.formData.region = this.regions[0].key
    },
  },

  mounted() {
    this.getThemeHit_locations()
    this.getThemeRegions()
  },
}
</script>

<style lang="less" scoped>
.custom-ivu-form {
  width: 90%;
}

.kw-group {
  .kw-group--label {
    position: absolute;
    top: 0;
    left: -80px;
    width: 80px;
    text-align: right;
    padding: 0 12px 0 0;
  }

  .kw-group--oper {
    position: absolute;
    top: 0;
    right: -70px;
    // width: 50px;
    height: 100%;

    .kgo--text {
      vertical-align: -20px;
    }

    .kgo--btn {
      // width: 24px;
      display: inline-flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: space-between;
      padding: 4px 0;
    }
  }
}

/deep/ .ivu-tooltip-light.ivu-tooltip-popper {
  font-size: 14px;
}
</style>
